<template>
  <main class="card-wrapper">
    <div class="left" :style="{width:`calc(${this.leftRate} - ${pxToVw(10)})`,marginRight:pxToVw(20)}">
      <slot name="left"></slot>
    </div>
    <div class="right" :style="{width:`calc(${this.leftRate} - ${pxToVw(10)})`}">
      <slot name="right"></slot>
    </div>
  </main>
</template>

<script lang="js">
import {pxToVw} from "@/utils/transform"
export default {
  props: {
    leftRate: {
      type: String,
      default: "50%"
    },
    right: {
      type: String,
      default: "50%"
    }
  },
  data() {
    return {
      pxToVw
    }
  },
  methods:{}
}
</script>

<style scoped lang="stylus">
.card-wrapper{
  height 100%
  display flex
  align-items center
  .left,.right{
    height @height
  }
}
</style>
